<template>
  <view :class="['p-customer-service', {fixed: fixed}]">
    <view v-if="isTop" class="btn" style="margin-bottom: 12px;">
      <x-button size="none" styles="background: none;padding: 0" @click="handleScrollTop">
        <view class="slot">
          <x-icon name="icon-036" size="34" color="#ED6A0C"/>
          <text class="_text">置顶</text>
        </view>
      </x-button>
    </view>
    <view class="btn">
      <!-- 没有店铺信息的，跳转到99猫自己的客服 -->
      <x-button
        v-if="storeInfo.channelCompanyName !== '杭州桃红网络有限公司'"
        size="none"
        styles="background: none;padding: 0"
        open-type="contact"
        :businessId="storeInfo.businessId"
        :sendMessageTitle="shareCustomerData.cardKeywords"
        :show-message-card="true"
        :session-from="sessionFrom"
        :send-message-img="shareCustomerData.cardUrl"
        >
        <view class="slot">
          <x-icon :name="iconName" :size="iconSize" :color="iconColor"/>
          <text class="_text">客服</text>
        </view>
      </x-button>
      <x-button
        v-else-if="isOpenApp && storeInfo"
        size="none"
        styles="background: none;padding: 0"
        @click="handleJumpCustomer"
      >
        <view class="slot">
          <x-icon :name="iconName" :size="iconSize" :color="iconColor"/>
          <text class="_text">客服</text>
        </view>
      </x-button>
      <x-button
        v-else-if="storeInfo && shareCustomerData && shareCustomerData.replyStatus === 1"
        size="none"
        styles="background: none;padding: 0"
        open-type="contact"
        :businessId="storeInfo.businessId"
        :sendMessageTitle="shareCustomerData.cardKeywords"
        :show-message-card="true"
        :session-from="sessionFrom"
        :send-message-img="shareCustomerData.cardUrl"
      >
        <view class="slot">
          <x-icon :name="iconName" :size="iconSize" :color="iconColor"/>
          <text class="_text">客服</text>
        </view>
      </x-button>
      <x-button
        v-else
        :businessId="storeInfo.businessId"
        :session-from="sessionFrom"
        size="none"
        styles="background: none;padding: 0"
        open-type="contact"
      >
        <view class="slot">
          <x-icon :name="iconName" :size="iconSize" :color="iconColor"/>
          <text class="_text">客服</text>
        </view>
      </x-button>
    </view>
  </view>
</template>

<script>
import $config from '@/config';
import XIcon from '@/components/x-icon';
import XButton from '@/components/x-button';

export default {
  name: 'PCustomerService',
  components: {
    XIcon,
    XButton
  },
  props: {
    storeInfo: {
      type: Object,
      default: () => null
    },
    shareCustomerData: {
      type: Object,
      default: () => null
    },
    sessionFrom: {
      type: [Object, String],
      default: () => null
    },
    isTop: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 第三方开发平台
      isOpenApp: $config.isOpen,
      isSaas: $config.project === 'saas'
    };
  },
  computed: {
    iconColor() {
      return this.fixed ? '#07C160' : '#FFFFFF';
    },
    iconSize() {
      return this.fixed ? '46' : '36';
    },
    iconName() {
      return this.fixed ? 'icon-030' : 'icon-079';
    }
  },
  created() {},
  methods: {
    handleChat() {
      this.$emit('chat');
      this.$XTrack('toCustomerServiceEvent');
    },
    // 联系客服-企业微信
    handleJumpCustomer() {
      const storeInfo = this.storeInfo || {};
      const shareCustomerData = this.shareCustomerData || {};
      this.$tools.$formatCustomerServiceChat(storeInfo, shareCustomerData);
    },
    handleScrollTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.p-customer-service{
  &:not(.fixed){
    .btn{
      .slot{
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        ._text{ color: #FFFFFF }
      }
    }
  }
  &.fixed {
    position: fixed; right: 20px; bottom: 20%;
    .btn{
      width: 96px; height: 96px; background: rgba(255, 255, 255, 0.9); border-radius: 96px; border: 1px solid #EBEDF0; box-shadow: -1px -1px 4px rgba(198, 198, 198, 0.2), 1px 4px 4px rgba(198, 198, 198, 0.3);
      .slot{
        display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px;
        ._text{ font-size: 24px; line-height: 24px; color: $uni-color-secondary; }
      }
    }
  }
}
</style>
